<template>
  <el-dialog
    :title="adddepetsform.id?'编辑部门':'添加部门'"
    :visible="dialogVisible"
    width="50%"
    @close="closeDialog"
  >
    <el-form ref="form" :model="adddepetsform" label-width="100px" :rules="rules">
      <el-form-item prop="name" label="活动名称">
        <el-input v-model="adddepetsform.name" placeholder="1-10字数" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model="adddepetsform.code" placeholder="1-10字数" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人">
        <!-- <el-input v-model="adddepetsform.manager" placeholder="1-10字数" /> -->
        <el-select v-model="adddepetsform.manager" placeholder="请选择" @focus="getemployeelist">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="adddepetsform.introduce" placeholder="1-50字数" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="confirmAdd">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addepartments, getdepartments, getbyIdedit, editupdate } from '@/api/departments'
import { getEmployeesimpleList } from '@/api/employee'
export default {
  name: 'Adddepts',
  model: {
    prop: 'dialogVisible'
  },
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    obj: {
      type: Object,
      required: true
    }
  },
  data() {
    const validatePassname = async(rule, value, callback) => {
      const res = await getdepartments()
      let flag = false
      if (this.adddepetsform.id) {
        // 编辑
        const newArr = res.depts.filter(item => item.pid === this.obj.pid && item.id !== this.obj.id)
        flag = newArr.some((item) => (item.name === value))
      } else {
        if (!this.obj.children) return callback()
        flag = this.obj.children.some((item) => (item.name === value))
      }

      if (flag) callback(new Error('不许输入' + value))
      callback()
    }
    const validatePasscode = async(rule, value, callback) => {
      const res = await getdepartments()
      let flag = false
      if (this.adddepetsform.id) {
        const newArr = res.depts.filter(item => (item.code !== this.obj.code))
        flag = newArr.some((item) => (item.code === value))
      } else {
        flag = res.depts.some((item) => (item.code === value))
      }
      if (flag) callback(new Error('不允许编码为' + value))
      callback()
    }
    return {
      adddepetsform: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
          { validator: validatePassname, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' },
          { validator: validatePasscode, trigger: 'blur' }

        ],
        manager: [
          { required: true, message: '请输入部门负责人', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ]
      },
      options: [],
      value: ''
    }
  },

  created() {

  },

  methods: {
    closeDialog() {
      this.$emit('input', false)
      this.$refs.form.resetFields()
      this.adddepetsform = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
    },
    async confirmAdd() {
      try {
        await this.$refs.form.validate()
        if (this.adddepetsform.id) {
          await editupdate(this.adddepetsform)
          this.$message.success('修改成功')
          this.$emit('onsuccess')
        } else {
          this.adddepetsform.pid = this.obj.id
          await addepartments(this.adddepetsform)

          this.$message.success('添加成功')

          this.$emit('onload')
        }
        this.closeDialog()
      } catch (error) {
        console.log(error)
      }
    },

    // this.$refs.form.validate(async(valid) => {
    //   if (valid) {
    //     const res = await addepartments({
    //       name: '1',
    //       code: '1',
    //       manager: '1',
    //       introduce: '1'
    //     })
    //     console.log(res)
    //     alert('submit!')
    //   } else {
    //     console.log('error submit!!')
    //     return false
    //   }

    async getemployeelist() {
      console.log(1)
      const res = await getEmployeesimpleList()
      console.log(res)
      this.options = res
    },
    async geteditdepts(id) {
      console.log('获取最新数据', id)
      const res = await getbyIdedit(id)
      this.adddepetsform = res
      console.log(res)
    }
  }
}
</script>

<style scoped lang='less'>

</style>
